<style>
.vue-area-item .b-item-box {
  padding-left: 15px;
}
</style>
<template>
  <div class="form-group clearfix vue-area-item">
    <label class="control-label" style="width: 65px;float: left;height: 34px;line-height: 34px;">行政区域：</label>
    <div class="b-item-box" style="width: auto;float: left;margin-right: 20px;">
      <div class="a-item" style="padding-left: 0;">
        <select id="bean-area1"
            aria-describedby="bean-area1-error"
            aria-invalid="true"
            class="form-control"
            data-placeholder="选择省">
          <option level="省级" value="51">四川省</option>
        </select>
        <select id="bean-area2"
            aria-describedby="bean-area2-error"
            aria-invalid="true"
            class="form-control"
            data-placeholder="选择市">
          <option level="市级" value="5110">内江市</option>
        </select>
        <select id="bean-area3"
            aria-describedby="bean-area3-error"
            aria-invalid="true"
            class="form-control"
            data-placeholder="选择区县">
          <option level="县级" value="511025">资中县</option>
        </select>
        <select id="bean-area4"
            aria-describedby="bean-area4-error"
            aria-invalid="false"
            class="form-control"
            data-placeholder="选择乡镇"
            @change="areaSelect(4,$event)">
          <template v-if="areaFixedArray[3] === 'true'">
            <option :value="areaIdValArray[3]" currAreaType="4" level="乡镇级">{{ areaNameValArray[3] }}</option>
          </template>
          <template v-else>
            <option value="">--</option>
            <option v-for="area in area4Array" :level="area.level" :selected="areaValArray[3] === area.id" :value="area.id" currAreaType="4">{{ area.name }}</option>
          </template>
        </select>
        <select id="bean-area5" aria-describedby="bean-area5-error"
            aria-invalid="false"
            class="form-control"
            data-placeholder="选择村"
            style="display: none;"
            @change="areaSelect(5,$event)">
          <template v-if="areaFixedArray[4] === 'true'">
            <option :value="areaIdValArray[4]" currAreaType="5" level="村级">{{ areaNameValArray[4] }}</option>
          </template>
          <template v-else>
            <option value="">--</option>
            <option v-for="area in area5Array" :level="area.level" :selected="areaValArray[4] === area.id" :value="area.id" currAreaType="5">{{ area.name }}</option>
          </template>
        </select>
      </div>
      <input type="hidden" id="bean-areaId" :name="areaId" :value="areaIdVal">
      <input type="hidden" id="bean-areaName" :name="areaName" :value="areaNameVal">
      <input type="hidden" id="bean-areaLevel" name="level" value="县级">
      <input type="hidden" id="bean-currAreaType" name="currAreaType" value="3">
      <input type="hidden" id="bean-currAreaId" name="currAreaId" value="511025">
      <input type="hidden" id="bean-currAreaName" name="currAreaName" value="资中县">
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import Swal from 'sweetalert2'

export default {
  props: {
    areaVal: {type: String},
    areaId: {type: String},
    areaName: {type: String},
    areaRequired: {type: String},
    areaIdVal: {type: String},
    areaNameVal: {type: String},
    areaFixed: {type: String},
    selectBy: {type: String}
  },
  data() {
    return {
      areaValArray: ['', '', '', '', ''],
      area1Array: [],
      area2Array: [],
      area3Array: [],
      area4Array: [],
      area5Array: [],
      result: {
        areaIdArr: ['', '', '', '', ''],
        areaNameArr: ['', '', '', '', ''],
        areaLevel: '',
        currAreaType: 3,
        currAreaId: '',
        currAreaName: ''
      },
      areaRequiredArray: [false, false, false, false, false],
      areaFixedArray: [false, false, false, false, false],
      areaIdValArray: [],
      areaNameValArray: []
    }
  },
  // watch: {
  //   areaVal(val) {
  //     // console.info('watch===' + val)
  //     this.init();
  //     this.setResultVal();
  //   }
  // },
  mounted() {
    let that = this;
    that.areaRequiredArray = that.areaRequired && that.areaRequired.split(',');
    that.areaIdValArray = that.areaIdVal && that.areaIdVal.split(',');
    that.areaNameValArray = that.areaNameVal && that.areaNameVal.split(',');
    that.areaFixedArray = that.areaFixed && that.fAreaFixed(that.areaFixed).split(',');
    let selectByArr = that.selectBy && that.fSelectBy(that.selectBy).split(',');
    $('input[name="level"]').val(['省级', '市级', '县级', '乡镇级', '村级'][that.areaIdValArray.length - 1]);
    $('input[name="currAreaType"]').val(that.areaIdValArray.length);
    $('input[name="currAreaId"]').val(that.areaIdValArray[that.areaIdValArray.length - 1]);
    $('input[name="currAreaName"]').val(that.areaNameValArray[that.areaNameValArray.length - 1]);
    // that.init();
    // that.areaSelectByTypeValue(1, '1');
    // that.areaSelectByTypeValue(2, '51');
    // that.areaSelectByTypeValue(3, '5110');
    // that.areaSelectByTypeValue(4, '511025');
    console.info(that.areaIdValArray)
    // console.info(`areaLevel:${$('#bean-areaLevel').val()},currAreaType:${$('#bean-currAreaType').val()},currAreaId:${$('#bean-currAreaId').val()},currAreaName:${$('#bean-currAreaName').val()}`)
    that.areaSelectByTypeValue(parseInt(selectByArr[0]), selectByArr[1]);
    $(':reset').click(function () {
      // console.info('--监听到rest--');
      that.setResultVal();
    });
    that.setResultVal();
  },
  methods: {
    setResultVal() {
      let that = this;
      setTimeout(function () {
        for (let i = 1; i <= 5; i++) {
          // that.result.areaIdArr[i - 1] = '';
          // that.result.areaNameArr[i - 1] = '';
          let _id = $('#bean-area' + i).val();
          let _text = $('#bean-area' + i).find('option:selected').text().replace(/[\r\n]/g, '');
          let _level = $('#bean-area' + i).find('option:selected').attr('level');
          that.result.areaIdArr[i - 1] = _id;
          if (!apiUtil.notEmpty(_id)) {
            _text = '';
            _level = '';
          } else {
            that.result.currAreaType = i;
            that.result.currAreaId = _id;
            that.result.areaLevel = _level;
            that.result.currAreaName = _text;
          }
          that.result.areaNameArr[i - 1] = _text;
        }
        // console.info(that.result.areaIdArr);
        // console.info(that.result.areaNameArr);
        // console.info(that.result.areaLevel);
        let areaIdVal = apiUtil.replace('' + that.result.areaIdArr, /,$/gi, '');
        let areaNameVal = apiUtil.replace('' + that.result.areaNameArr, /,$/gi, '');
        $('#bean-areaId').val(areaIdVal);
        $('#bean-areaName').val(areaNameVal);
        $('#bean-areaLevel').val(that.result.areaLevel);
        $('#bean-currAreaType').val(that.result.currAreaType);
        $('#bean-currAreaId').val(that.result.currAreaId);
        $('#bean-currAreaName').val(that.result.currAreaName);
      }, 500)
    },
    init() {
      let that = this;
      let areaVal = that.areaVal;
      // console.info('areaVal:' + areaVal);
      if (apiUtil.notEmpty(areaVal)) {
        let areaArray = areaVal.split(',');
        // console.info(areaArray)
        if (areaArray) {
          switch (areaArray.length) {
            case 5: {
              that.areaValArray[4] = areaArray[4];
            }
              // eslint-disable-next-line no-fallthrough
            case 4: {
              that.areaValArray[3] = areaArray[3];
            }
              // eslint-disable-next-line no-fallthrough
            case 3: {
              that.areaValArray[2] = areaArray[2];
            }
              // eslint-disable-next-line no-fallthrough
            case 2: {
              that.areaValArray[1] = areaArray[1];
            }
              // eslint-disable-next-line no-fallthrough
            case 1: {
              that.areaValArray[0] = areaArray[0];
            }
          }
        }
      }
      if (apiUtil.notEmpty(that.areaValArray[0])) {
        that.areaSelectByTypeValue(2, that.areaValArray[0]);
      }
      if (apiUtil.notEmpty(that.areaValArray[1])) {
        that.areaSelectByTypeValue(3, that.areaValArray[1]);
      }
      if (apiUtil.notEmpty(that.areaValArray[2])) {
        that.areaSelectByTypeValue(4, that.areaValArray[2]);
      }
      if (apiUtil.notEmpty(that.areaValArray[3])) {
        that.areaSelectByTypeValue(5, that.areaValArray[3]);
      }
    },
    areaSelect(type, ele) {
      let that = this;
      for (let i = type; i < 5; i++) {
        that.areaValArray[i] = '';
      }
      let id = ele.target.value;
      if (type < 5) {
        that.areaSelectByTypeValue(type + 1, id);
      }
      that.setResultVal();
    },
    areaSelectByTypeValue(type, value) {
      let that = this;
      switch (type) {
        case 1: {
          that.area1Array = [];
          that.result.areaIdArr[0] = '';
          that.result.areaNameArr[0] = '';
        }
          // eslint-disable-next-line no-fallthrough
        case 2: {
          that.area2Array = []
          that.result.areaIdArr[1] = '';
          that.result.areaNameArr[1] = '';
        }
          // eslint-disable-next-line no-fallthrough
        case 3: {
          that.area3Array = []
          that.result.areaIdArr[2] = '';
          that.result.areaNameArr[2] = '';
        }
          // eslint-disable-next-line no-fallthrough
        case 4: {
          that.area4Array = []
          that.result.areaIdArr[3] = '';
          that.result.areaNameArr[3] = '';
        }
          // eslint-disable-next-line no-fallthrough
        case 5: {
          that.area5Array = []
          that.result.areaIdArr[4] = '';
          that.result.areaNameArr[4] = '';
        }
      }
      if (!apiUtil.notEmpty(value)) {
        return;
      }
      axios.post(site.area.list
          , 'type=' + type + '&parentId=' + value
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let data = result.data;
          switch (type) {
            case 1: {
              that.area1Array = data;
              break;
            }
            case 2: {
              that.area2Array = data;
              break;
            }
            case 3: {
              that.area3Array = data;
              break;
            }
            case 4: {
              that.area4Array = data;
              break;
            }
            case 5: {
              that.area5Array = data;
              break;
            }
          }
          // console.info(that.area5Array)
        } else {
          Swal.fire(result.message);
        }
      });
    },
    fAreaFixed(areaIds) {
      let str = '';
      let xs = areaIds.split(',');
      for (let i = 0; i < 5; i++) {
        str += (xs[i] && apiUtil.notEmpty(xs[i]) || false);
        if ((i) < xs.length) {
          str += ',';
        }
      }
      // console.info('fAreaFixed:' + str)
      return str;
    },
    fSelectBy(areaIds) {
      let str = '1,1';
      let xs = areaIds.split(',');
      if (xs.length > 1) {
        str = (xs.length + 1) + ',' + xs[xs.length - 1];
      }
      // console.info('fSelectBy:' + str)
      return str;
    }
  }
}
</script>
